<template>
  <f7-page>
    <f7-navbar :title="$t('m.uphone1')" back-link=" "></f7-navbar>

    <div class="content-padding">
      <custom-input type="tel" :placeholder="$t('m.uphone2')" v-model="formItems.phone"></custom-input>
      <custom-input v-model="formItems.code" button :placeholder="$t('m.uphone3')" :count="60" @send-sms="sendSms" :send-status.sync="isSend"></custom-input>
      <custom-input type="password" :placeholder="$t('m.uphone4')" v-model="formItems.twopwd"></custom-input>
      <f7-button fill color="blue" large @click="handleUpdatePhone">{{$t('m.submit')}}</f7-button>
    </div>
  </f7-page>
</template>

<script>
  import { updatePhone } from "../api/my";
  import { sendPhoneCode } from "../api";

  export default {
    name: "update-phone",

    data () {
      return {
        formItems: {
          phone: '',
          code: '',
          twopwd: ''
        },
        isSend: false
      }
    },
    methods: {
      sendSms () {
        sendPhoneCode({ phone: this.formItems.phone, type: 4}).then(() => {
          this.isSend = true;
        })
      },
      handleUpdatePhone() {
        updatePhone(this.formItems).then(() => {
          this.$f7router.back();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding20;
    .custom-input {
      margin-bottom: $padding20;
    }
  }
</style>
